<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>index</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="demo">
    <h2>{{message}}</h2>
    <button @click="fullName">修改</button>
  </div>
</body>

<script type="text/javascript">
  // 创建Vue实例
  const vm = new Vue({
    el: '#demo',
    data() {
      return {
        message: '今天的天气不错'
      }
    },
    methods: {
      fullName() {
        const weather = ['不错', '炎热', '寒冷'];
        const index = Math.floor(Math.random() * weather.length);
        this.message = '今天的天气' + weather[index];
      }
    }
  })
</script>

</html>